<template>
	<view class="body flex-column flex flex-center">
		<u-navbar title="金额明细" back-icon-color="#FFF" title-color="#fff" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view class="top">
			<!-- <view class="top-left">
				<text>我的积分</text>
				<text class="integral">{{ remainRewardPoints }}</text>
			</view>
			<view class="top-right">
				<image src="/static/user/image 26.png" mode="aspectFill"></image>
			</view> -->

			<view class="up flex flex-evenly align-center">
				<view class="up-left flex align-center flex-column flex-center">
					<text>{{ user.rechargeAmount || 0 }}</text>
					<span>我的余额</span>
				</view>
				<view class="wire"></view>
				<view class="up-right flex align-center flex-column flex-center">
					<text>{{ user.totalIncome || 0 }}</text>
					<span>提现卷</span>
				</view>
			</view>

			<view class="below flex flex-evenly align-center">
				<view class="up-left flex align-center flex-column flex-center">
					<text>{{ user.ableConsumeTotalIncome || 0 }}</text>
					<span>提货卷</span>
				</view>
				<view class="wire"></view>
				<view class="up-right flex align-center flex-column flex-center">
					<text>{{ user.indirectIncome || 0 }}</text>
					<span>津贴卷</span>
				</view>
				<view class="wire"></view>
				<view class="up-right flex align-center flex-column flex-center">
					<text>{{ updateUser }}</text>
					<span>提现卷提现额度</span>
				</view>
			</view>
		</view>

		<view v-if="loading" class="add-load">
			<u-loading mode="flower"></u-loading>
		</view>

		<view class="integral-bottom" v-else-if="fields.length != 0">
			<recordListing :bottonBool="true" :orders="fields"></recordListing>
		</view>

		<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>

		<loadMore :currentLength="fields.length" :total="total" :pageSize="pageSize" @load-list="getMyRecordPage()" ref="loadArray" @load-add="pageNum++"></loadMore>
	</view>
</template>

<script>
import user from '@/api/user';
import recordListing from '@/components/record-listing/record.vue';
import loadMore from '@/components/load-more/load-more.vue';

export default {
	components: {
		recordListing,
		loadMore
	},
	data() {
		return {
			fields: [],
			remainRewardPoints: 0,
			total: 0,
			pageNum: 1,
			pageSize: 10,
			loading: true,
			user: {}
		};
	},
	computed: {
		updateUser() {
			const incomeA = parseFloat(this.user.ableCashIncome) || 0;
			const incomeB = parseFloat(this.user.indirectAblecashIncome) || 0;
			return (incomeA + incomeB).toFixed(2);
		}
	},
	onLoad() {
		this.pageNum = 1;
		this.remainRewardPoints = uni.getStorageSync('user').remainRewardPoints;
		this.getAccountChangeRecord();
		this.getInfo();
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},
	methods: {
		getAccountChangeRecord() {
			user.getAccountChangeRecord({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				this.fields = res.rows;
				this.total = res.total;
				this.loading = false;
			});
		},
		getMyRecordPage() {
			user.getAccountChangeRecord({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				this.total = res.total;
				this.fields = [...this.fields, ...res.rows];
				return this.fields.length;
			});
		},
		getInfo() {
			user.getInfo()
				.then((res) => {
					this.user = res.data;
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-evenly {
	justify-content: space-evenly;
}
.flex-column {
	flex-direction: column;
}

.body {
	width: 100%;
	min-height: 100px;
	// background: url('@/static/user/Rectangle.png') no-repeat;
	// background-size: 100% auto;
	background-color: crimson;
}
.top-right {
	position: absolute;
	right: 0;
	z-index: 10;
	image {
		width: 340rpx;
		height: 253.13rpx;
	}
}
.top {
	// height: 253.13rpx;
	// display: flex;
	// justify-content: space-between;
	// align-items: center;

	width: 96%;
	margin: 0 2%;
	margin-top: 50rpx;
	min-height: 300rpx;
	background: linear-gradient(180deg, #d1c8a8, #ffffff 180%);
	border-radius: 30rpx 30rpx 0 0;
	position: relative;
	top: 40rpx;
	z-index: 0;
	.wire {
		width: 3rpx;
		height: 30rpx;
		background-color: #333;
	}
	text {
		font-weight: bold;
		color: #000;
		font-size: 35rpx;
	}
	span {
		color: #333;
		font-size: 25rpx;
	}
	.up {
		width: 100%;
		height: 130rpx;
	}
	.below {
		width: 100%;
		height: 130rpx;
	}

	// .top-left {
	// 	z-index: 100;
	// 	display: flex;
	// 	flex-direction: column;
	// 	margin-left: 45rpx;
	// 	font-weight: bold;
	// 	font-size: 30rpx;
	// 	color: #3e271a;
	// 	.integral {
	// 		font-size: 62rpx;
	// 		color: #333333;
	// 	}
	// }
}

.integral-bottom {
	padding-top: 50rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	position: relative;
	z-index: 1;
}
</style>
